<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器的应用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
            left: 0;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 200px;
        }
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            var box2=document.getElementById("box2");
            var btn03=document.getElementById("btn03");
            var timer;//定义一个变量，用来保存定时器的标识
            //定义一个方向变量
            var dir;
            //定义一个移动方法
            //obj要执行动画的对象
            // attr执行动画的样式比如left top height width
            //target获取目标位置
            //speed移动速度(正数向右移动，复数向左移动)
            var demo = function(obj,speed,target){
                var oldValue=parseInt(getStyle(obj,attr));//这就得到了老位置
                var newValue=oldValue+speed;
                if ( newValue<0 || newValue>target){
                    newValue=target;
                }
                obj.style.attr=newValue+"px";
                return newValue;
            };
            //写一个右移的方法
            btn01.onclick=function () {
                clearInterval(timer);//清空上一次的事件
                timer=setInterval(function () {
                    var newValue=demo(10,800);//需要一个移动的方法，移动有速度，有范围
                    box1.style.left=newValue+"px";
                },300)
            };
            // btn01.onclick=function () {  //点击btn01按钮以后使box1移动 box1 （left的值增加）
            //     clearInterval(timer); //开启定时器之前 关闭上一个定时器
            //     timer= setInterval(function () { //开启一个定时器 用来执行动画效果
            //         var oldValue=parseInt(getStyle(box1,"left"));//把字符串中的合法数字给提取出来 //获取box1原来的值
            //         var newValue=oldValue+50;
            //         if (newValue>800){ //判断newValue是否大于800
            //             newValue=800;
            //         }
            //         box1.style.left=newValue+"px";//将新值设置给box1
            //         if (newValue===800){//当元素移动到800时 则停止执行动画，
            //             clearInterval(timer);
            //         }
            //     },300);
            // };
            btn02.onclick=function () {
                // clearInterval(timer);//开启定时器之前 关闭上一个定时器
                // timer= setInterval(function () { //开启一个定时器 用来执行动画效果
                //     var oldValue=parseInt(getStyle(box1,"left"));//把字符串中的合法数字给提取出来  //获取box1原来的值
                //     var newValue=oldValue-50;
                //     if (newValue<0){ //判断newValue是否大于800
                //         newValue=0;
                //     }
                //     box1.style.left=newValue+"px";//将新值设置给box1
                //     if (newValue===0){ //当元素移动到800时 则停止执行动画，
                //         clearInterval(timer);
                //     }
                // },300);
                clearInterval(timer);//清空上一次的事件
                timer=setInterval(function () {
                    var newValue=demo(-10,0);//需要一个移动的方法，移动有速度，有范围
                    box1.style.left=newValue+"px";
                },300)
            };
            btn03.onclick=function () {
                clearInterval(timer);
                timer=setInterval(function () {
                var newValue=demo(10,800);
                box2.style.left=newValue+"px";
                },500)
            }
        };
        function getStyle(obj,name) {  //获取当前元素的样式 获取元素的任意样式
            if (window.getComputedStyle){
                return getComputedStyle(obj,null)[name];  //正常浏览器的方式 具有getComputedStyle()的方法
            }else {
                return  obj.currentStyle[name]; //current当前的  //IE8用
            }//第一种方式 也可以用下面的三元运算符 ture?语句1：语句2
            // return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
        }
    </script>
</head>
<body>
<script>
    /*parseInt()把字符串中的合法数字给提取出来
    *
    *
    *
    * */
</script>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn03">点击按钮以后box1向左移动</button>
<br>
<br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top:0"></div>
</body>
</html>
